import * as React from 'react';
import {observer} from 'mobx-react'
import ECharts from "echarts-for-react";
import 'echarts/map/js/china';
import {optionConfig} from './optionConfig'
import {INorthEastType} from "../../../type/firstType";
import FirstStore from '../../../store/firstStore'

interface IProps {
    northeastArea?: INorthEastType
    northArea?: INorthEastType
    westArea?: INorthEastType
    southArea?: INorthEastType
    eastArea?: INorthEastType
}

// 刷新列表页
export const upDate = () => {
    // @ts-ignore
    Map.handleUpDate();
};


@observer
class Map extends React.Component<IProps> {

    private static handleUpDate: any;

    constructor(props) {
        super(props);
        Map.handleUpDate = this.newData.bind(this);
    }

    public chartRefM: any;// ECharts的实例

    public newData = () => {
        this.forceUpdate()
    }

    public componentDidMount() {
    }

    public componentDidUpdate(prevProps: Readonly<IProps>, prevState: Readonly<{}>, snapshot?: any) {
        const {northeastArea, eastArea, southArea, westArea, northArea} = this.props
        this.chartRefM &&
        this.chartRefM.getEchartsInstance().setOption(optionConfig(northeastArea, eastArea, southArea, westArea, northArea))
    }


    // 监听鼠标移出geo事件
    onGeoSelectChanged = async () => {
        FirstStore.arr = []
        FirstStore.dataPre = [] = []
        FirstStore.name = ''
        const {northeastArea, eastArea, southArea, westArea, northArea} = this.props
        this.chartRefM.getEchartsInstance().setOption(optionConfig(northeastArea, eastArea, southArea, westArea, northArea))
    }

    public componentWillUnmount() {
        FirstStore.arr = []
        FirstStore.dataPre = [] = []
        FirstStore.name = ''
        this.chartRefM.getEchartsInstance().clear()
    }

    // 监听点击散点图事件
    public handleClick = (params) => {
        const {macNumArr, macNumArrLog, numAll} = FirstStore
        const arr = [...macNumArr, ...macNumArrLog, ...numAll]
        if (params.componentSubType === "effectScatter") {
            arr.forEach((item, index) => {
                if (JSON.stringify(item.key) === JSON.stringify(params.data)) {
                    window.location.href = '#/second'
                    FirstStore.SerialLotNumber = item.value
                }
            })
        }
    }

    public render() {
        let legendSelectChanged = {
            'globalout': this.onGeoSelectChanged,
            'click': this.handleClick
        }
        return (
            <ECharts
                ref={ref => {
                    this.chartRefM = ref
                }}
                option={{}}
                style={{
                    height: '100%',
                    width: '100%',
                    top: '0%',
                    position: 'relative',
                }}
                notMerge
                lazyUpdate
                onEvents={legendSelectChanged}
            />
        );
    }
}

export default Map;
